import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import List from "./global/List";
import { actions } from "./global/List/reducer";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

import Modal from "./components/Modal";

import styled from "styled-components";

const Button = styled.button`
  cursor: pointer;
  border: none;
  background-color: #707070;
  color: white;
  outline: none;
  border-radius: 4px;
  padding: 10px 20px;
  opacity: 0.8;
  &:hover {
    opacity: 1;
  }
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      test: 1,
      a: "lsdfjls ksdflsdjf sdfj",
      list: [],
      listId: null,
      isModalOpen: false
    };
    this.test = this.state.test;
    console.log(this.props);
  }

  componentWillMount() {}
  componentDidMount() {
    // DOM manipulate
    const ctx = this.canvas.getContext("2d");
  }

  componentWillReceiveProps(nextProps) {
    console.log("app", nextProps);
  }

  componentDidUpdate(prevProps, prevState) {}

  componentShouldUpdate(nextProps, nextState) {
    return true || false;
  }

  componentWillUnmount() {}

  test = () => {
    console.log("test");
  };

  add = attr => {
    // this.state.test = this.state.test + 1;

    this.setState({
      test: this.test + attr
    });
  };

  addToList = () => {
    // const {list: newList} = this.state;
    // newList.push(this.state.value);
    this.props.addListItem(this.state.value);
    this.setState({
      value: ""
    });
  };

  onInputChange = event => {
    this.setState({
      value: event.target.value
    });
  };

  open = () => {
    this.setState({
      isModalOpen: true
    });
  };
  close = () => {
    this.setState({
      isModalOpen: false
    });
  };

  render() {
    const { test, value } = this.state;
    const { list, listId } = this.props;

    // let test = this.state.test;
    // const listComponent =
    return (
      <div className="App">
        <Button onClick={this.open}>Open Modal</Button>
        <Modal isOpen={this.state.isModalOpen} close={this.close}>
          <div>sdlkfjsdlfj</div>
          <h2>sdkljflksdfj</h2>
        </Modal>
        <canvas ref={ref => (this.canvas = ref)} />
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>{listId}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          {value}
        </p>
        <input value={value} onChange={this.onInputChange} />
        <button onClick={this.addToList}>add</button>
        <List ref={ref => (this.listComponent = ref)} title="a list" />
      </div>
    );
  }
}
App.defaultProps = {};

const mapStateToProps = state => {
  return state.list;
};

const mapDispatchToProps = dispatch => {
  return { ...bindActionCreators(actions, dispatch) };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
